<template>
  <div class="swiper-container">
    <template>
      <el-carousel :interval="5000" type="card" height="200px">
        <el-carousel-item v-for="banner in banners" :key="banner.targetId">
          <img :src="banner.imageUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      banners: (state) => state.home.banners,
    }),
  },
  mounted() {
    // vuex
    this.$store.dispatch("banners");
  },
};
</script>

<style lang='less'>
.swiper-container {
  margin-top: 20px;
  img {
    border-radius: 20px;
    width: 100%;
  }
}
.swiper-slide {
  text-align: center;
  font-size: 12px;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
  z-index: 100;
}
</style>